<script setup>
import {ref, onMounted, computed} from 'vue'
import {useRouter} from 'vue-router'
import {useCartStore} from '@/store/cartStore.js'

const router = useRouter()
const cartStore = useCartStore()


onMounted(() => {
  cartStore.updateNewList()
})
</script>

<template>
  <div class="cart-view" v-if="cartStore.cartList.length > 0">
    <!--购物车所有商品列表 -->
    <div style="margin: 20px">
      <el-table border :data="cartStore.cartList" style="width: 100%">
        <el-table-column type="selection" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="商品信息" align="center">
          <template #default="{row}">
            <router-link class="cart-item" :to="{path: `/detail/${row.id}`}">
              <img :src="row.picture" alt="商品图片"/>
              <p>{{ row.name }}</p>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="150" align="center">
          <template #default="{row}">
            <p class="goods-price">¥ {{ row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="200" align="center">
          <template #default="{row}">
            <el-input-number v-model="row.count" :min="1" :max="100"
                             @change="handleCountChange(row.$index)"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="150" align="center">
          <template #default="{row}">
            <p class="goods-price">¥ {{ (row.price * row.count).toFixed(2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{row}">
            <el-popconfirm :title="`确认删除该商品？`" confirm-button-text="确认" cancel-button-text="取消"
                           @confirm="cartStore.deleteCart(row.skuId)">
              <template #reference>
                <el-button type="text" style="color: #27ba9b">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="cart-bottom">
      <span>共&nbsp;<i> {{ cartStore.allPrice.totalCount }} </i>&nbsp;件商品,
        已选择&nbsp;<i>{{ cartStore.selectedCount }}</i>&nbsp;件，总计:
        <i>¥ {{ cartStore.selectedPrice.toFixed(2) }}</i>
      </span>
      <el-button type="primary" style="background-color: #27ba9b" @click="router.push('/my/checkout')">下单结算
      </el-button>
    </div>
  </div>

  <!-- 购物车为空时显示 -->
  <div class="cart-empty" v-else>
    <el-empty description="购物车还没有商品，赶紧选购吧！">
      <el-button type="primary" @click="router.push('/home')">随便逛逛</el-button>
    </el-empty>
  </div>
</template>

<style scoped lang="scss">
.cart-view {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;

  .el-table {
    box-shadow: 0 4px 8px 0 rgba(161, 159, 159, 0.2), 0 6px 20px 0 rgba(178, 178, 178, 0.19);

    .cart-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 10px;

      img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
      }

      p {
        color: #757575;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
      }

    }

    .goods-price {
      color: #cf4444;
      font-size: 18px;
    }

  }

  .cart-bottom {
    border: 1px solid #efefef;
    padding: 20px;
    margin: 0 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(161, 159, 159, 0.2), 0 6px 20px 0 rgba(161, 159, 159, 0.2);
    span {
      color: #757575;
      font-size: 18px;

      i {
        color: #cf4444;
        font-weight: bold;
      }
    }
  }
}

.cart-empty {
  display: flex;
  margin: 20px auto;
  max-width: 1240px;
  justify-content: center;
  box-shadow: 0 4px 8px 0 rgba(161, 159, 159, 0.2), 0 6px 20px 0 rgba(161, 159, 159, 0.2);

  .el-button {
    background-color: #27ba9b;
    border: none;
    font-size: 18px;
    padding: 20px;
  }
}

</style>
